<juci-layout-with-sidebar>
	<div ng-controller="InternetPortMappingPageCtrl">
		<juci-config title="{{'Port Forwarding'|translate}}">
			<p translate>Port mapping allows remote computers to connect to a specific device within your private network.</p>
			<!--<div class="panel panel-default" ng-show="rule">
				<div class="panel-heading">
					<h3 class="panel-title">{{rule[".name"]}}</h3>
				</div>
				<div class="panel-body">
					<uci-firewall-nat-rule-edit ng-model="rule"></uci-firewall-nat-rule-edit>
				</div>
				<div class="panel-footer">
					<juci-config-apply ></juci-config-apply>
				</div>
			</div>-->
			<table class="table">
				<thead>
					<th></th>
					<th translate>Name</th>
					<th translate>Direction</th>
					<th translate>Src. IP</th>
					<th translate>Dst. IP</th>
					<th translate>Protocol</th>
					<th translate>Local port</th>
					<th translate>Public Port</th>
					<th></th>
					<th></th>
				</thead>
				<tbody >
					<tr ng-repeat="r in redirects track by $index">
						<td><input type="checkbox" ng-model="r.enabled.value"/></td>
						<td>{{ r.name.value }}</td>
						<td>{{ r.src.value }} {{'to'|translate}} {{ r.dest.value }}</td>
						<td>{{ r.src_ip.value }}</td>
						<td>{{ r.dest_ip.value }}</td>
						<td>{{ r.proto.value }}</td>
						<td>{{ r.dest_port.value }}</td>
						<td>{{ r.src_dport.value }}</td>
						<td style="width: 1%"><button class="btn btn-default" ng-click="onEditRule(r)" ><i class="fa fa-pencil" style="{{editColor}}"></i></button></td>
						<td style="width: 1%"><button class="btn btn-default" ng-click="onDeleteRule(r)"><i class="fa fa-trash-o"></i></button></td>
					</tr>
					<tr>
						<td colspan="9"></td>
						<td style="width: 1%"><button class="btn btn-default" ng-click="onAddRule()"><i class="fa fa-plus"></i></button></td>
					</tr>
				</tbody>
			</table>
			<modal title="{{'Add / Edit Port Mapping'|translate}}" ng-show="rule" on-accept="onAcceptEdit()" on-dismiss="onCancelEdit()" dismiss-label="{{'Cancel'|translate}}" accept-label="{{'Save'|translate}}">
				<uci-firewall-nat-rule-edit ng-model="rule"></uci-firewall-nat-rule-edit>
				<div class="alert alert-danger" ng-show="errors && errors.length"><ul><li ng-repeat="e in errors track by $index">{{e|translate}}</li></ul></div>
			</modal>
		</juci-config>
	</div>
</juci-layout-with-sidebar>
